<template>
  <div class="login-box">
    <h1>Todo</h1>
    <el-form
      class="form"
      :model="userInputs"
      ref="form"
    >
      <el-form-item
        v-for="(config, key) in formConfig"
        :key="key"
        :prop="key"
        size="large"
        :rules="config.rules"
      >
        <el-input
          v-model.trim="userInputs[key]"
          :type="config.type"
          :placeholder="config.placeholder"
        >
          <template
            #suffix
            v-if="key === 'password' || key === 'dpassword'"
          >
            <el-icon class="hidden-icon" @click="toggleHiddenMode(config)">
              <Hide v-if="config.type === 'password'"></Hide>
              <View v-else></View>
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-row style="justify-content: flex-end; width: 100%;">
          <el-button
            size="default"
            class="login-btn"
            @click="handlerLogin"
          >
            登录
          </el-button>
        </el-row>
      </el-form-item>
    </el-form>
    <div class="register">
      <p @click="switchToRegister" class="p">
        <span>还没有账号？去注册！</span>
        <el-icon class="arrow"><ArrowRight /></el-icon>
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { LOGIN } from '@/store/modules/user/types'

type FormConfig = {
  type: 'text' | 'password',
  placeholder: string,
  rules: any[]
}

const { switchToRegister, validateSpecialChar } = defineProps<{
  switchToRegister: () => void,
  validateSpecialChar: (rule: any, value: any, callback: any) => void
}>()

const form = ref<FormInstance>()

defineExpose({
  form
})

const route = useRoute()
const router = useRouter()
const store = useStore()

const formConfig = reactive<{[propName: string]: FormConfig}>({
  username: {
    placeholder: '请输入用户名',
    type: 'text',
    rules: [
      { required: true, message: '请输入用户名' },
      { min: 4, max: 16, message: '用户名长度为 4 ~ 16 个字符' }
    ]
  },
  password: {
    placeholder: '请输入密码',
    type: 'password',
    rules: [
      { required: true, message: '请输入密码' },
      { min: 4, max: 16, message: '密码长度为 8 ~ 16 个字符' },
      { validator: validateSpecialChar, message: '密码必须包含一个特殊字符' }
    ]
  },
})
const userInputs = reactive<{[propName: string]: string}>({
  username: '',
  password: ''
})

const handlerLogin = () => {
  form.value?.validate(valid => {
    if (!valid) {
      return
    }
    const formData = new FormData()
    formData.set('username', userInputs.username)
    formData.set('password', userInputs.password)
    store.dispatch(LOGIN, formData).then(result => {
      if (!result) {
        return
      }
      router.push(route.query.from ? (route.query.from as string) : '/home')
    })
  })
}
const toggleHiddenMode = (config: FormConfig) => {
  config.type = (config.type === 'password' ? 'text' : 'password')
}
</script>

<style lang="scss" scoped>
$main-body-bg: #323542;

.login-box {
  width: 50%;
  max-width: 400px;
  border-radius: $border-radius;
  background: $main-body-bg;
  margin: 0 auto;
  padding: 2rem;
  box-sizing: border-box;

  h1 {
    font-weight: bolder;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
    background: -webkit-linear-gradient(315deg, #42d392 35%, #323542);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .icon {
    justify-content: center;
    font-size: 5rem;
    margin-bottom: 1rem;
  }

  .register {
    margin: 0;
    text-align: right;
    font-size: .5rem;
    color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .p {
      cursor: pointer;
      margin: 0;
      &:hover {
        color: #42d392;
      }
    }
    .arrow {
      font-size: .8rem;
      position: relative;
      top: 2px;
    }
  }
}
</style>
